<template>
	<view class="container">
		<u-navbar
			title="工作台"
			leftIcon="scan"
			leftIconSize="24px"
			rightIcon="bell"
			placeholder
		>
			<template #right>
				<view class="notify">
					<i class="iconfont icon-notify"></i>
					<u-badge shape="horn" :isDot="hasNotify"></u-badge>
				</view>
			</template>
		</u-navbar>
		<u-notice-bar
			:text="notice"
			speed="50"
			url="/pages/file/file"
		></u-notice-bar>
		<view class="board">
			<view class="card">
				<u-row>
					<u-col span="3">
						<view class="button">
							<view class="icon">
								<u-avatar
									size="30"
									icon="red-packet-fill"
									fontSize="20"
									:color-index="0"
									random-bg-color
								>
								</u-avatar>
							</view>
							<text>功能文字</text>
						</view>
					</u-col>
					<u-col span="3">
						<view class="button">
							<view class="icon">
								<u-avatar
									size="30"
									icon="red-packet-fill"
									fontSize="20"
									:color-index="11"
									random-bg-color
								>
								</u-avatar>
							</view>
							<text>功能文字</text>
						</view>
					</u-col>
					<u-col span="3">
						<view class="button">
							<view class="icon">
								<u-avatar
									size="30"
									icon="red-packet-fill"
									fontSize="20"
									:color-index="9"
									random-bg-color
								>
								</u-avatar>
							</view>
							<text>功能文字</text>
						</view>
					</u-col>
					<u-col span="3">
						<view class="button">
							<view class="icon">
								<u-avatar
									size="30"
									icon="red-packet-fill"
									fontSize="20"
									:color-index="14"
									random-bg-color
								>
								</u-avatar>
							</view>
							<text>功能文字</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-cell-group>
			<u-cell title="信息标题" value="02-01" isLink></u-cell>
			<u-cell title="信息标题" value="02-01" isLink></u-cell>
			<u-cell title="信息标题" value="02-01" isLink></u-cell>
			<u-cell title="信息标题" value="02-01" isLink></u-cell>
			<u-cell title="信息标题" value="02-01" isLink></u-cell>
		</u-cell-group>
		<view class="actions">
			<view class="title">其他功能</view>
			<u-row>
				<u-col span="3">
					<view class="box">
						<i class="iconfont icon-setting"></i>
						<text>功能说明</text>
					</view>
				</u-col>
				<u-col span="3">
					<view class="box">
						<i class="iconfont icon-setting"></i>
						<text>功能说明</text>
					</view>
				</u-col>
				<u-col span="3">
					<view class="box">
						<i class="iconfont icon-setting"></i>
						<text>功能说明</text>
					</view>
				</u-col>
				<u-col span="3">
					<view class="box">
						<i class="iconfont icon-setting"></i>
						<text>功能说明</text>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			notice: '欢迎使用本系统',
			hasNotify: true,
		}
	},
	onLoad() {
		this.$store
			.dispatch('getLoginInfo')
			.then(() => {
				//
			})
			.catch(() => {})
	},
	onShow() {
		this.$store
			.dispatch('getLoginInfo')
			.then(() => {
				//
			})
			.catch(() => {})
	},
	computed: {
		// 在线状态
		isOnline() {
			return this.$store.getters.isOnline
		},
	},
	methods: {
		//
	},
	mounted() {
		//
	},
}
</script>

<style lang="scss" scoped>
.notify {
	position: relative;

	.iconfont {
		font-size: 24px;
	}

	.u-badge {
		position: absolute;
		top: 0;
		right: 0;
	}
}

.board {
	position: relative;
	height: 120px;

	.card {
		position: absolute;
		z-index: 2;
		left: 20px;
		right: 20px;
		bottom: -30px;
		padding: 0 7px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 5px 15px rgba(60, 120, 216, 0.3);

		.button {
			text-align: center;
			padding: 15px 7px;

			.icon {
				display: inline-block;
			}

			text {
				display: block;
				font-size: 14px;
				margin-top: 3px;
			}
		}
	}

	&:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.5;
		background: url('/static/board.jpg') 10% 90% no-repeat;
		background-size: 150%;
	}
}

.u-notice-bar {
	position: relative;
}

.u-cell-group {
	margin-top: 50px;
	background-color: #fff;
}

.actions {
	margin-top: 10px;
	padding: 15px 15px 0;
	background-color: #fff;

	.title {
		font-size: 15px;
		color: #303133;
		margin-bottom: 20px;
	}

	.u-row {
		padding-bottom: 20px;

		.box {
			text-align: center;

			.iconfont {
				display: block;
				font-size: 24px;
				color: #666;
			}

			text {
				display: block;
				font-size: 14px;
				color: #666;
				margin-top: 3px;
			}
		}
	}
}
</style>
